<template>
  <div class="container">
    <el-row class="titleBox clearfix">
      <span class="blockTitle">接口统计详情</span>
    </el-row>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-form-item label="时间" class="row-padding-bottom">
            <el-input
              placeholder="请输入"
              clearable
              v-model="filterField.projectName"
              @blur="filterField.projectName = changeValue($event)"
            />
          </el-form-item>
          <el-form-item label="版本号" class="row-padding-bottom">
            <el-select
              placeholder="请选择"
              v-model="filterField.status"
              clearable
            >
              <el-option label="启用" value="1" />
              <el-option label="停用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="接口名称" class="row-padding-bottom">
            <el-input
              placeholder="请输入"
              clearable
              v-model="filterField.projectName"
              @blur="filterField.projectName = changeValue($event)"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="commonBtn"
            />
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="loading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          align="center"
          prop="createTime"
          label="应用类型"
          :formatter="formatTd"
        />
        <el-table-column
          align="center"
          prop="name"
          label="版本号"
          :formatter="formatTd"
        />
        <el-table-column
          align="center"
          prop="createTime"
          label="接口名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="处理成功次数"
          :formatter="formatTd"
        />
        <el-table-column
          align="center"
          prop="createTime"
          label="处理失败次数"
          :formatter="formatTd"
        />
        <el-table-column
          align="center"
          label="操作"
          width="250px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="designatedItem(scope.row.id)"
              >对接日志</el-link
            >
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息" />
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
        @getpageSize="getpageSize"
        @getpageNo="getpageNo"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'interfaceStatManageList',
  data() {
    return {
      requestUrl: 'api-c/companyaudit/expand/companyauditlist', //表格请求路径
      loading: false,
      departmentTypeFun: '正式环境',
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        companyName: '',
        type: '',
        machineNo: '',
        status: '',
        lastDate: '',
      },
      pageSize: 20,
      pageNo: 1,
      companyList: [], //项目名称下来列表
      pageSizeNumber: 20,
      total: 0,
      companyId: '',
      addOrEdit: '',
      formVisible: false,
      formData: {
        id: '',
        companyId: '',
        companyName: '',
        pointId: '',
        type: '',
        machineNo: '',
        direction: '',
        authCode: '',
        remark: '',
      },
      formRules: {
        companyId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' },
        ],
        type: [
          { required: true, message: '设备类型不能为空', trigger: 'change' },
        ],
        machineNo: [
          { required: true, message: '请输入正确的识别号', trigger: 'blur' },
        ],
        authCode: [
          { required: true, message: '授权码不能为空', trigger: 'blur' },
        ],
        direction: [
          { required: true, message: '进出方向不能为空', trigger: 'change' },
        ],
      },
      isRuleLoading: false,
      isDisabled: false,
      usccDisabled: false,
      id: '',
      typeData: '',
      companyNameUscc: '', //修改赋值的uscc
      projectNameId: '', //修改赋值的projectId
      zkIsShow: false,
      points: [], //工点列表
      isShowUpdate: '',
      isShowDelete: '',
      isShowAdd: '',
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    /**
     * @description: 切换状态
     * @param {*} index
     * @param {*} row
     */
    changStatus($event, uuid) {
      const vm = this
      if ($event) {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #98F203' }, '启用'),
            h('span', '该appId?, 是否继续?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$message({
                type: 'success',
                message: '启用成功!',
              })
              done()
            } else {
              done()
            }
          },
        }).then((action) => {})
      } else {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #FF4949' }, '停用'),
            h('span', '该appId?, 是否继续?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$message({
                type: 'success',
                message: '停用成功!',
              })
              done()
            } else {
              done()
            }
          },
        }).then((action) => {})
      }
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 添加appID
     * @param {*} data
     */
    addAppid() {
      this.$router.push({
        path: '/home/interfacePlatform/addAppid',
        name: 'addAppid',
        query: {
          projectId: '42060408',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //加载项目列表
    getCompanyList() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attrule/expand/findcomp',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.companyList = response.data.result
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    selectChange(val) {},
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.getCompanyList(val, this.pageSizeNumber, this.companyId)
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    //查看详情
    updateRow(row) {
      this.$router.push({
        path: '/home/interfacePlatform/equipmentAppidDetailJs',
        name: 'equipmentAppidDetailJs',
        query: {
          projectId: '42060408',
          depositId: '2', //后台返回的保证金id
          method: 'FUNDDEPOSIT', //根据缴纳方式和缴纳形式确定页面样式
          payMethod: 'ALL_PAY',
          statusDesc: '--',
          projectName: '襄阳技师学院图书馆项目部',
          type: 'zs',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //查看项目
    designatedItem(row) {
      this.$router.push({
        path: '/home/interfacePlatform/designatedItemJs',
        name: 'designatedItemJs',
        query: {
          projectId: '42060408',
          depositId: '2', //后台返回的保证金id
          method: 'FUNDDEPOSIT', //根据缴纳方式和缴纳形式确定页面样式
          payMethod: 'ALL_PAY',
          statusDesc: '--',
          projectName: '襄阳技师学院图书馆项目部',
          type: 'zs',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //对接日志
    dockingLog(row) {
      this.$router.push({
        path: '/home/interfacePlatform/dockingLogJs',
        name: 'dockingLogJs',
        query: {
          projectId: '42060408',
          depositId: '2', //后台返回的保证金id
          method: 'FUNDDEPOSIT', //根据缴纳方式和缴纳形式确定页面样式
          payMethod: 'ALL_PAY',
          statusDesc: '--',
          projectName: '襄阳技师学院图书馆项目部',
          type: 'zs',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //进入测试环境
    interfaceDebugging() {
      this.$router.push({
        path: '/home/interfacePlatform/equipmentAppidCs',
        name: 'equipmentAppidCs',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppid',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  position: absolute;
  top: 130px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  overflow: hidden;

  .mainCon {
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .selectWidth {
    width: 100%;
  }

  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;

    .listAddBtn {
      width: 136px;
      background: #009588;
      border: none;
    }

    .listAddBtn:hover {
      background: #009588;
      border-color: #009588;
      opacity: 0.8;
    }

    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
}
/deep/ .el-tag {
  line-height: 23px;
  height: 23px;
}
</style>
